<template>
  <div class="ai-risk-warning page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="exclamation-triangle" class="header-icon"></icon>
          <span class="header-title">AI风险预警系统</span>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <div class="placeholder-content">
                <div class="text-center">
                  <p class="title">AI风险预警系统</p>
                  <p class="description">此模块包含实时预警通知、预警配置和预警详情功能</p>
                  <div class="feature-list">
                    <div class="feature-item">
                      <h3>实时预警通知</h3>
                      <p>显示高风险预警弹窗、处置要求和预警历史记录</p>
                    </div>
                    <div class="feature-item">
                      <h3>预警配置</h3>
                      <p>管理敏感规则库，编辑规则参数</p>
                    </div>
                    <div class="feature-item">
                      <h3>预警详情</h3>
                      <p>展示多模态证据链和处置建议模板</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AIRiskWarning',
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.ai-risk-warning {
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #d3d6dd;
  background-image: url("~@/assets/pageBg.png");
  background-size: cover;
  background-position: center center;

  .module-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .module-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: rgba(19, 25, 47, 0.8);
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid rgba(104, 216, 254, 0.3);

    .header-icon {
      font-size: 24px;
      color: #68d8fe;
      margin-right: 10px;
    }

    .header-title {
      font-size: 20px;
      color: #68d8fe;
      font-weight: bold;
    }
  }

  .module-content {
    flex: 1;
    overflow: hidden;
  }

  .content-box {
    width: 100%;
    height: 100%;
  }

  .content-wrapper {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .placeholder-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(19, 25, 47, 0.7);
    border-radius: 5px;
    padding: 20px;
  }

  .text-center {
    text-align: center;
  }

  .title {
    font-size: 24px;
    color: #68d8fe;
    margin-bottom: 20px;
  }

  .description {
    font-size: 16px;
    color: #d3d6dd;
    margin-bottom: 30px;
  }

  .feature-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
  }

  .feature-item {
    background-color: rgba(19, 25, 47, 0.8);
    border: 1px solid rgba(104, 216, 254, 0.3);
    border-radius: 5px;
    padding: 20px;
    width: 250px;
    text-align: left;

    h3 {
      color: #68d8fe;
      margin-bottom: 10px;
      font-size: 18px;
    }

    p {
      color: #d3d6dd;
      font-size: 14px;
      line-height: 1.5;
    }
  }
}
</style>
